<template>
  <div class="box col-warpper">
    <!--  头部 start  -->
    <div class="header row-warpper">
      <div class="date">
        <digtal style="width: 100%;height: 100%" v-model="dateConfig"/>
      </div>
      <div class="title col-warpper">
        <span>{{ title }}</span>
      </div>
      <div class="message row-warpper">
      </div>
    </div>
    <!--  头部 end  -->
    <!--  content start  -->
    <div class="content col-warpper">
      <!--   统计 start  -->
      <div class="statistical row-warpper">
        <div class="con col-warpper">
          <div>项目公告</div>
          <digtal-only-num
              :font-size="15"
              style="width: 100%;height: 5vh"
              v-model="statistical.xmgg"/>
        </div>
        <div class="con col-warpper">
          <div>选取结束</div>
          <digtal-only-num
              :font-size="15"
              style="width: 100%;height: 5vh"
              v-model="statistical.xqjs"/>
        </div>
        <div class="con col-warpper">
          <div>成交信息</div>
          <digtal-only-num
              :font-size="15"
              style="width: 100%;height: 5vh"
              v-model="statistical.cjxx"/>
        </div>
        <div class="con col-warpper">
          <div>项目支持率</div>
          <digtal-only-num
              :font-size="15"
              style="width: 100%;height: 5vh"
              content="{nt}%"
              v-model="statistical.xmzcl"/>
        </div>
        <div class="con col-warpper">
          <div>中介机构</div>
          <digtal-only-num
              :font-size="15"
              style="width: 100%;height: 5vh"
              v-model="statistical.zjjg"/>
        </div>
        <div class="con col-warpper">
          <div>项目申请单位</div>
          <digtal-only-num
              :font-size="15"
              style="width: 100%;height: 5vh"
              v-model="statistical.xmsqdw"/>
        </div>
      </div>
      <!--   统计 end   -->
      <!--   图表 start   -->
      <div class="chart row-warpper">
        <div class="left col-warpper">
          <div class="con">
            <zjxm-charts-line/>
          </div>
          <div class="con">
            <zjcs-business-type-pie/>
          </div>
        </div>
        <div class="center">
          <div class="con col-warpper">
            <div class="title">县市区中介超市概况</div>
            <div class="body">
              <div class="map col-warpper">
                <div style="width: 50%;height: 100%">
                  <regin-chart-bar title="各县区市中介超市概况"/>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right col-warpper">
          <div class="con">
            <zjjg-chart-bar/>
          </div>
          <div class="con col-warpper">
            <div class="title">滨州中介机构介绍</div>
            <scroll-board/>
          </div>
        </div>
      </div>
      <!--   图表 end   -->
    </div>
    <!-- content end  -->
  </div>
</template>

<script>
import zjxmChartsLine from "@/views/largeScreen/charts/zjxmChartsLine";
import ZjcsBusinessTypePie from "@/views/largeScreen/charts/zjcsBusinessTypePie";
import zjjgChartBar from "@/views/largeScreen/charts/zjjgChartBar";
import scrollBoard from "@/views/largeScreen/charts/scrollBoard";
import reginChartBar from "@/views/largeScreen/charts/reginChartBar";

export default {
  name: "mainScreen",
  components: {ZjcsBusinessTypePie, reginChartBar, scrollBoard, zjxmChartsLine, zjjgChartBar},
  computed: {
    /**
     * 计数器 日期时间 配置
     * @returns {{number: (number)[], content: string}}
     */
    dateConfig() {
      const yearContent = "{nt}年"
      const monthContent = "{nt}月"
      const dayContent = "{nt}日 "
      const weekContent = "星期" + ["一", "二", "三", "四", "五", "六", "日"][this.date.weekday - 1]
      const hourContent = this.date.hour < 10 ? " 0{nt}" : " {nt}"
      const minContent = this.date.min < 10 ? ":0{nt}" : ":{nt}"
      const secContent = this.date.sec < 10 ? ":0{nt}" : ":{nt}"
      return {
        number: [this.date.year, this.date.month, this.date.date, this.date.hour, this.date.min, this.date.sec],
        content: yearContent + monthContent + dayContent + weekContent + hourContent + minContent + secContent
      }
    },
  },
  data() {
    return {
      // --- 头部 ---
      date: {
        year: 2022,
        month: 7,
        date: 25,
        weekday: 4,
        hour: 9,
        min: 20,
        sec: 24
      },
      title: "滨州中介超市概况",
      message: "测hi测试",
      // --- 统计 ---
      statistical: {
        xmgg: 5580, // 项目公告
        xqjs: 5589, // 选取结束
        cjxx: 4896, //成交信息
        xmzcl: 30, // 项目支持率
        zjjg: 1991, // 中介机构
        xmsqdw: 1194 // 项目申请单位
      },
      // --- tool ---
      Interval: null,
    }
  },
  methods: {
    /**
     * 获取当前时间
     */
    getNow() {
      this.Interval = setInterval(() => {
        const date = new Date()
        this.date.year = parseInt(date.getFullYear())
        this.date.month = parseInt(date.getMonth() + 1)
        this.date.date = parseInt(date.getDate())
        this.date.weekday = parseInt(date.getDay())
        this.date.hour = parseInt(date.getHours())
        this.date.min = parseInt(date.getMinutes())
        this.date.sec = parseInt(date.getSeconds())
      }, 1000)
    }
  },
  mounted() {
    this.getNow()
  },
  beforeDestroy() {
    clearInterval(this.Interval)
    this.Interval = null
  }
}
</script>

<style lang="less" scoped>
.box {
  background: url("~@/assets/image/bg.jpg");
  background-size: 100vw 100vh;
  background-repeat: no-repeat;
  height: 100vh;

  .header {
    height: 15vh;
    align-self: stretch;
    justify-content: space-between;

    .date {
      width: 37.5vw;
      height: 10vh;
      align-self: flex-start;
    }

    .title {
      width: 25vw;
      height: 10vh;

      span {
        align-self: center;
        color: #ffffff;
        font-size: 24px;
        letter-spacing: 4px;
      }
    }

    .message {
      width: 37.5vw;
      justify-content: flex-end;


      span {
        width: 100%;
        color: #ffffff;
      }
    }
  }

  .content {
    align-self: stretch;
    align-items: stretch;

    .statistical {
      justify-content: space-around;

      .con {
        justify-content: center;
        background: url("~@/assets/image/list-bg.png");
        background-size: 100% 100%;
        width: 15vw;
        height: 10vh;
        background-repeat: no-repeat;
        padding: 5px;

        div {
          color: #04f4e2;
        }
      }
    }

    .chart {
      justify-content: space-around;

      .con {
        background: url("~@/assets/image/img-3-1.png") no-repeat;
        background-size: 100% 100%;
        padding: 2vh;

        .title {
          color: #22daff;
          font-style: normal;
          font-size: 18px;
          font-family: sans-serif;
          -webkit-text-stroke: 1px rgb(34, 218, 255);
          margin-bottom: 5px;
        }
      }

      .left {
        .con {
          height: 31.5vh;
          width: 30vw;
        }
      }

      .center {
        .con {
          height: 70vh;
          width: 30vw;
          background: url("~@/assets/image/img-4.png") no-repeat;
          background-size: 100% 100%;

          .title {
            color: #22daff;
            font-style: normal;
            font-size: 18px;
            font-family: sans-serif;
            -webkit-text-stroke: 1px rgb(34, 218, 255);
          }

          .body {
            .map {
              width: 30vw;
              height: 68vh;
              background: url("~@/assets/image/map.png");
              background-size: 100% 100%;
              align-items: flex-end;
            }
          }
        }
      }

      .right {
        .con {
          height: 31.5vh;
          width: 30vw;
        }
      }
    }
  }
}
</style>
